<template>
  <ContentWrap>
    <el-form class="-mb-15px" :model="queryParams" ref="queryFormRef" :inline="true" label-width="68px" @submit.native.prevent>
      <el-form-item label="姓名" prop="name">
        <el-input v-model="queryParams.name" placeholder="请输入姓名" clearable @keyup.enter="handleQuery" class="!w-240px"/>
      </el-form-item>
           <el-form-item label="专业" prop="majorId">
        <el-select v-model="queryParams.majorId" placeholder="请选择专业" clearable>
          <el-option v-for="item in majors" :label="item.name" :value="item.id"/>
        </el-select>
      </el-form-item>
      <el-form-item label="手机号" prop="mobile">
        <el-input v-model="queryParams.mobile" placeholder="请输入手机号" clearable @keyup.enter="handleQuery" class="!w-240px"/>
      </el-form-item>
      <el-form-item>
        <el-button @click="handleQuery">
          <Icon icon="ep:search" class="mr-5px"/>
          搜索
        </el-button>
        <el-button @click="resetQuery">
          <Icon icon="ep:refresh" class="mr-5px"/>
          重置
        </el-button>
        <el-button type="success" plain @click="handleExport" :loading="exportLoading"
                   v-hasPermi="['yxt:member:export']">
          <Icon icon="ep:download"/>
          导出
        </el-button>
      </el-form-item>
    </el-form>
  </ContentWrap>

  <ContentWrap>
    <el-table v-loading="loading" :data="list" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center"/>
      <el-table-column label="教师姓名" prop="name" width="100" show-overflow-tooltip/>
      <el-table-column label="工号" prop="code" min-width="100" show-overflow-tooltip/>
      <el-table-column label="专业" prop="majors" min-width="200">
        <template #default="scope">
          <el-tag v-for="tag in scope.row.majors" type="warning" :key="tag"
                  :disable-transitions="true" class="mr-5px">
            {{ tag.name }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="手机号" prop="mobile" min-width="150" show-overflow-tooltip/>
      <el-table-column label="归属学校" prop="schoolName" min-width="200" show-overflow-tooltip/>
      <el-table-column label="周一(累计上课数量)" prop="mondayCount" min-width="200" show-overflow-tooltip/>
      <el-table-column label="周二(累计上课数量)" prop="tuesdayCount" min-width="200" show-overflow-tooltip/>
      <el-table-column label="周三(累计上课数量)" prop="wednesdayCount" min-width="200" show-overflow-tooltip/>
      <el-table-column label="周四(累计上课数量)" prop="thursdayCount" min-width="200" show-overflow-tooltip/>
      <el-table-column label="周五(累计上课数量)" prop="fridayCount" min-width="200" show-overflow-tooltip/>
      <el-table-column label="周六(累计上课数量)" prop="saturdayCount" min-width="200" show-overflow-tooltip/>
      <el-table-column label="周日(累计上课数量)" prop="sundayCount" min-width="200" show-overflow-tooltip/>
      <el-table-column label="总课时" prop="sumCount" min-width="100" show-overflow-tooltip/>
    </el-table>
    <Pagination v-model:limit="queryParams.pageSize" v-model:page="queryParams.pageNo"
                :total="total" @pagination="getList"/>
  </ContentWrap>
</template>

<script lang="ts" setup>

import {useMajorApi} from "@/api/yxt/major";
import {useMemberApi} from "@/api/yxt/member";
import {useConfirm, useMessage} from "@/components/Notice";
import * as XLSX from "xlsx";
const {t} = useI18n() // 国际化

defineOptions({name: 'YxtTeacherCourseData'})

const majorApi = useMajorApi();
const memberApi = useMemberApi();

const multipleSelection = ref<Array<any>>([])
const exportLoading = ref(false)
const majors = ref<Array<any>>([])
const loading = ref<boolean>(true)      // 列表的加载中
const list = ref<Array<any>>([])        // 列表的数据
const total = ref(0) // 列表的总页数
const queryParams = reactive({
  memberType: 1,
  pageNo: 1,
  pageSize: 10,
  name: '',
  code: '',
  mobile: ''
})


// 列表
const getList = async () => {
  loading.value = true
  try {
    const data = await memberApi.getCourseData(queryParams)
    list.value = data.list
    total.value = data.total
  } finally {
    loading.value = false
  }
}

const handleSelectionChange = (val) => {
  multipleSelection.value = val;
}
const handleExport = () => {
  useConfirm(t("common.exportMessage"), async () => {
    exportLoading.value = true
    try {
      if (list.value.length == 0) {
        useMessage("没有可导出数据", "warning")
        return;
      }
      const exportData = multipleSelection.value.length > 0 ? multipleSelection.value
        : await memberApi.courseDataExport(queryParams);
      const formData = exportData.map(formatData)
      // 创建工作簿
      const wb = XLSX.utils.book_new();
      // 创建工作表
      const ws = XLSX.utils.json_to_sheet(formData);
      // 将工作表添加到工作簿
      XLSX.utils.book_append_sheet(wb, ws, "选中数据");
      // 生成文件
      XLSX.writeFile(wb, "教师课程汇总数据.xlsx");
    } finally {
      exportLoading.value = false
    }
  });
}

const formatData = (item: any) => {
  return {
    "教师姓名": item.name,
    "工号": item.code,
    "专业": item.majors.map(major => major.name).join(","),
    "手机号": item.mobile,
    "归属学校": item.schoolName,
    "周一": item.mondayCount,
    "周二": item.tuesdayCount,
    "周三": item.wednesdayCount,
    "周四": item.thursdayCount,
    "周五": item.fridayCount,
    "周六": item.saturdayCount,
    "周日": item.sundayCount,
    "总课时": item.sumCount
  }
}

const queryFormRef = ref() // 搜索的表单
// 搜索
const handleQuery = () => {
  getList()
}

// 重置
const resetQuery = () => {
  queryFormRef.value.resetFields()
  handleQuery()
}

// 更新
const formRef = ref()
const openForm = (id: number) => {
  formRef.value.open(id)
}

function getTermLabel(grade, term) {
  // 根据 grade 和 term 生成学期标签
  let gradeLabel = '';
  switch (grade) {
    case 1:
      gradeLabel = '大一';
      break;
    case 2:
      gradeLabel = '大二';
      break;
    case 3:
      gradeLabel = '大三';
      break;
    case 4:
      gradeLabel = '大四';
      break;
    case 5:
      gradeLabel = '已毕业';
      break;
    default:
      gradeLabel = '已毕业';
  }
  if (grade == 5) return gradeLabel;
  let termLabel = '';
  switch (term) {
    case 1:
      termLabel = '(上)';
      break;
    case 2:
      termLabel = '(下)';
      break;
    default:
      termLabel = '';
  }
  return gradeLabel + termLabel;
}

// 加载
onMounted(async () => {
  majors.value = await majorApi.getMajorList();
  getList();
})
</script>
